<template>
  <div class="entirety">
    <!-- 轮播图 -->
    <div class="ward">
      <div class="img">
        <el-carousel
          :interval="1000"
          trigger="hover"
          height="466px"
          pause-on-hover="true"
        >
          <el-carousel-item class="img-b" v-for="item in images" :key="item">
            <el-image :src="item" style="width: 100%; height: 466px"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="nav">
      <div class="nav-w">
        <!-- 导航 -->
        <el-affix>
          <div class="nav-list">
            <!-- <router-link :to="`/home/recommend/${}`">推荐</router-link> -->
            <span
              :class="{ active: show == '1' }"
              class="nav-item"
              @click="cilikitem('1')"
              ><router-link to="/home/recommend">推荐</router-link></span
            >
            <span
              class="nav-item"
              :class="{ active: show == '2' }"
              @click="cilikitem('2')"
              ><router-link to="/home/original">作品</router-link></span
            >
            <span
              class="nav-item"
              :class="{ active: show == '3' }"
              @click="cilikitem('3')"
              ><router-link to="/home/original">教程</router-link></span
            >
            <span
              class="nav-item"
              :class="{ active: show == '4' }"
              @click="cilikitem('4')"
              ><router-link to="/home/original">专题</router-link></span
            >
            <span
              class="nav-item"
              :class="{ active: show == '5' }"
              @click="cilikitem('5')"
              ><router-link to="/home/recommend">动态</router-link></span
            >
            <span
              class="nav-item"
              :class="{ active: show == '6' }"
              @click="cilikitem('6')"
              ><router-link to="/home/recommend">关注</router-link></span
            >
            <span class="right" @click="changeDialog">
              <svg
                t="1666105418154"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="38762"
                data-spm-anchor-id="a313x.7781069.0.i2"
                width="25"
                height="25"
              >
                <path
                  d="M682.666667 768a85.333333 85.333333 0 1 1 170.666666 0 85.333333 85.333333 0 0 1-170.666666 0zM426.666667 768a85.333333 85.333333 0 1 1 170.666666 0 85.333333 85.333333 0 0 1-170.666666 0zM170.666667 768a85.333333 85.333333 0 1 1 170.666666 0 85.333333 85.333333 0 0 1-170.666666 0zM682.666667 512a85.333333 85.333333 0 1 1 170.666666 0 85.333333 85.333333 0 0 1-170.666666 0zM426.666667 512a85.333333 85.333333 0 1 1 170.666666 0 85.333333 85.333333 0 0 1-170.666666 0zM170.666667 512a85.333333 85.333333 0 1 1 170.666666 0 85.333333 85.333333 0 0 1-170.666666 0zM682.666667 256a85.333333 85.333333 0 1 1 170.666666 0 85.333333 85.333333 0 0 1-170.666666 0zM426.666667 256a85.333333 85.333333 0 1 1 170.666666 0 85.333333 85.333333 0 0 1-170.666666 0zM170.666667 256a85.333333 85.333333 0 1 1 170.666666 0 85.333333 85.333333 0 0 1-170.666666 0z"
                  p-id="38763"
                  data-spm-anchor-id="a313x.7781069.0.i1"
                  class="selected"
                  fill="#7e808f"
                ></path>
              </svg>
              选择兴趣技能
            </span>
          </div>
        </el-affix>
        <!-- 卡片 -->
        <router-view></router-view>
      </div>
    </div>

    <!-- 对话框 -->
    <Interest ref="interestRef"></Interest>
  </div>
  <div></div>
</template>

<script setup lang="ts">
import { MoreFilled, Search } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
const visible = ref(false);
const show = ref("1");
//这是兴趣爱好的弹框
const interestRef = ref();
const changeDialog = () => {
  interestRef.value.openHandler();
};
// 图片的地址
let images = ref([
  "https://rs.dance365.com/photo/1667210329871.jpg?im…eView2/0/w/2000/h/1200/format/webp/ignore-error/1",
  "https://rs.dance365.com/photo/1667373574669.jpg?im…eView2/0/w/2000/h/1200/format/webp/ignore-error/1",
]);
const cilikitem = (i: any) => {
  show.value = i;
};
</script>

<style scoped lang="less">
::v-deep(.el-carousel__button) {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 14px;
}
::v-deep(.el-card__body) {
  padding: 0;
}
::v-deep(.el-col-5) {
  max-width: 20%;
}

.entirety {
  padding-top: 20px;
  margin: 0;
  padding: 0;
  .ward {
    width: 100%;
    background: #ffffff;
    .img {
      margin: 0 auto;
      width: 1200px;
      .img-b {
        border-radius: 30px;
      }
    }
  }

  .nav {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f5f7f9;
    .nav-w {
      width: 100%;
      margin: 0 auto;
      .nav-list {
        background-color: #ffffff;
        position: relative;
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-bottom: 10px;
        .nav-item {
          padding: 0 4px;
          margin: 0 20px;
          line-height: 80px;
          color: #7d8090;
          font-size: 16px;
          height: 65px;
          &.active {
            color: #111;
            border-bottom: 3px solid #000;
          }
          &:hover {
            color: #111;
            cursor: pointer;
          }
        }
        .right {
          color: #7d8090;
          position: absolute;
          right: 11%;
          cursor: pointer;
          .icon{
            position: absolute;
            left: -25px;
          }
        }
      }
    }
  }
}
.frame {
  .my-header {
    .frame-item {
      font-style: normal;
      font-size: 18px;
    }
    .frame-num {
      color: #b1b5c1;
      padding-left: 20px;
    }
    .frame-text {
      display: flex;
      color: #b1b5c1;
      margin: 6px 0 0;
      font-size: 14px;
    }
  }
  .form {
    margin: 0;
    padding: 0;
    padding: 10px 20px;
    min-height: 300px;
    .form-i {
      position: relative;
      display: inline-block;
      //   padding-left: 33px;
      // background: #f5f7f9;
      // border: 1px solid #eaecf0;
      // height: 40px;
      // line-height: 40px;
    }
    .form-b {
      position: absolute;
      left: 230px;
      color: #7d8090;
      background: #f5f7f9;
      border-color: #f5f7f9;
      width: 60px;
      height: 40px;
      text-align: center;
      font-size: 14px;
    }
  }
}
</style>
